<%--
  Created by IntelliJ IDEA.
  User: Lanan
  Date: 2017/12/21 0021
  Time: 17:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<html>
<head>
    <%--<%@ include file="/commons/basejs.jsp" %>--%>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>添加文章</title>
</head>
<body>
<style type="text/css">
    .grid{
        font:12px arial,helvetica,sans-serif;
        border: 0px solid #8DB2E3;width:100%;
        border-collapse:collapse;
    }
    .grid td{
        font:100% arial,helvetica,sans-serif;
        text-align: center;
        height:40px;
        border:1px solid #e0e0e0;
        padding-left:5px}
</style>

<form id="insertArticle" action="" method="post">
    <div class="easyui-tabs" id="insert_article_tabs" data-options="tabWidth:120"  style="height:530px;padding:0px">
        <div title="文章基本信息"  data-options="iconCls:'icon-edit'" style="padding:20px">
            <input hidden="hidden" name="catagoryOneId" id="catagory_one_id_insert"/>
            <input hidden="hidden" name="catagoryTwoId" id="catagory_two_id_insert"/>
            <table class="grid" align="center">
                <tr>
                    <td  class="tdcc2" colspan="6"><h2>文章基本信息</h2></td>
                </tr>
                <tr>
                    <td><label>文章标题:</label></td>
                    <td><input class="easyui-validatebox" name="title" data-options="missingMessage:'请输入文章标题',required:true"></td>
                    <td><label>作者:</label></td>
                    <td><input class="easyui-validatebox" name="writer" data-options="missingMessage:'请输入文章作者',required:true"></td>
                    <td><label>来源:</label></td>
                    <td><input class="easyui-validatebox" name="source" data-options="missingMessage:'请输入文章来源',required:true"></td>
                </tr>
                <tr id="bank_opening_id">
                    <td rowspan="2"><lable for="intro">文章简介:</lable></td>
                    <td colspan="3" rowspan="2">
                        <textarea id="insert_article_intro" name="intro" class="easyui-validatebox" data-options="missingMessage:'请输入文章简介',required:true" style="margin: 0px; width: 493px;height:90px;"></textarea>
                    </td>
                    <td rowspan="2"><lable for="intro">图片logo:</lable></td>
                    <td>
                        <div id="upload_ue"></div>
                        <div>
                            <img id="articleLogoUrl" align="center" height="90" width="90">
                            <input type="hidden" id="articlePicture" name="img" data-options="required:true"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input style="margin-left: 10px" type="button" onclick="upArticleImage()" value="上传图片">
                    </td>
                </tr>
                <tr>
                    <td><label>所属分类:</label></td>
                    <td>
                        <select class="easyui-combotree" id="insert_article_category" style="width:140px;" data-options="missingMessage:'请选择文章所属',required:true"></select>
                    </td>
                    <td><label>排序:</label></td>
                    <td><input name="ord" value="0" id="articleOrd" class="easyui-numberspinner" style="width: 140px;" required="required" data-options="required:false,editable:true,missingMessage:'请输入排序序号（大前小后）'"></td>
                </tr>
            </table>
        </div>


        <div title="文章内容" id="article_content" data-options="iconCls:'icon-edit'" style="padding:20px">
            <div>
                <textarea id="editor" style="height:500px;" name="content" data-options="missingMessage:'请选择文章所属',required:true"></textarea>
            </div>
        </div>
        <script type="text/javascript">
            //实例化编辑器
            //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
            var ue = UE.getEditor('editor',{
                serverUrl:"${path}/file/upload.do"
            });
        </script>
    </div>
    <div  data-options="region:'south',border:false" style="height: 24px; padding-top: 8px;text-align: center" >
        <a  class="easyui-linkbutton" icon="icon-save" onclick="insertArticleInfo()">保存</a>
        <a  class="easyui-linkbutton" icon="icon-cancel" onclick="$('#article_insert_dialog').dialog('close');" >取消</a>
    </div>
</form>

<script type="text/javascript">

    function handelArticleCategoryCombobox() {

        $("#insert_article_category").combotree({
            url : "${path}/article/category/getArticleCategoryCombobox.do?article=1",
            idField:'id',
            parentField : 'pid',
            lines : true,
            panelHeight : 'auto',
            editable:false,
            onBeforeSelect: function(node) {
                if (!$(this).tree('isLeaf', node.target)) {
                    $(this).tooltip({
                        position: 'right',
                        content: '<span style="color:#fff">只能选择叶子节点</span>',
                        onShow: function(){
                            $(this).tooltip('tip').css({
                                backgroundColor: '#666',
                                borderColor: '#666'
                            });
                        }
                    });
                    return false;
                }
                if (node.pid == null) {
                    $("#catagory_one_id_insert").val(node.id);
                    $("#catagory_two_id_insert").val(null);
                } else {
                    $("#catagory_one_id_insert").val(node.pid);
                    $("#catagory_two_id_insert").val(node.id);
                }
            },
            onClick: function(node) {
                if (!$(this).tree('isLeaf', node.target)) {

                }
            }
        });
    }

    var _editor;
    $(function() {

        //重新实例化一个编辑器，防止在上面的editor编辑器中显示上传的图片或者文件
        _editor = UE.getEditor('upload_ue',{
            serverUrl:"${path}/file/upload.do?compress=1"
        });

        _editor.ready(function () {
            //设置编辑器不可用
            // _editor.setDisabled();
            //隐藏编辑器，因为不会用到这个编辑器实例，所以要隐藏
            _editor.hide();
            //侦听图片上传
            _editor.addListener('beforeInsertImage', function (t, arg) {
                //有多少张图片arg.length就是多大
                $("#articlePicture").val(arg[0].src);
                $("#articleLogoUrl").attr('src',arg[0].src);
            });
        });

        // 初始化弹框分类选择
        handelArticleCategoryCombobox();
    });

    function upArticleImage() {
        var myImage = _editor.getDialog("insertimage");
        myImage.open();
    }

    function insertArticleInfo() {
        var logo = $("#articlePicture").val();
        if (logo == null || logo.length <= 0 || logo == "") {
            $.messager.show({
                title:"提示",
                msg: "请上传文章图片！",
                timeout:1000,style:"left:30%;top:10%",
                showType:"fade"
            });
            return;
        }
        var tab = $('#insert_article_tabs').tabs('getSelected');
        var index = $('#insert_article_tabs').tabs('getTabIndex',tab);
        var content = ue.getContent();
        if (content == null || content.length <= 0 || content == "") {
            if (index != 1) {
                $.messager.confirm("提示", "请确认您已完善文章基本信息,前往编辑文章内容?", function(yes) {
                    if(yes) {
                        $("#insert_article_tabs").tabs('select', '文章内容');
                        return;
                    }
                });
            } else {
                $.messager.show({
                    title:"提示",
                    msg: "请编辑文章内容！",
                    timeout:1000,style:"left:30%;top:10%",
                    showType:"fade"
                });
            }
            return;
        } else {
            if (index != 0) {
                $("#insert_article_tabs").tabs('select', '文章基本信息');
            }
        }
        var msg = "添加";
        var url = "${path}/article/insert.do";
        lananUpdateOrInsert(msg, url, "insertArticle", "article_insert_dialog", "article_grid");
    }

</script>

</body>
</html>
